<template>

    <div class="login-wrapper">
        <n-tabs default-value="signin" size="large" justify-content="space-evenly" style="padding:20px;">
            <n-tab-pane name="signin" tab="登录">

                <n-form ref="formRef" :model="model">
                    <n-form-item-row label="用户名">
                        <n-input v-model:value="model.username" placeholder="输入用户名" />
                    </n-form-item-row>
                    <n-form-item-row label="密码">
                        <n-input v-model:value="model.password" placeholder="输入密码" />
                    </n-form-item-row>
                </n-form>
                <n-button type="primary" block secondary strong @click="onLogin">
                    登录
                </n-button>
            </n-tab-pane>
            <n-tab-pane name="signup" tab="注册">
                <n-form ref="formRef" :model="model">
                    <n-form-item-row label="用户名">
                        <n-input v-model:value="model.username" placeholder="输入用户名" />
                    </n-form-item-row>
                    <n-form-item-row label="密码">
                        <n-input v-model:value="model.password" placeholder="输入密码" />
                    </n-form-item-row>
                    <n-form-item-row label="重复密码">
                        <n-input v-model:value="model.reenteredPassword" placeholder="输入重复密码" />
                    </n-form-item-row>
                </n-form>
                <n-button type="primary" block secondary strong @click="onReg">
                    注册
                </n-button>
            </n-tab-pane>
        </n-tabs>
    </div>

</template>

<script setup lang="ts">
  import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
  import type { NotificationType } from 'naive-ui'
import { useNotification } from 'naive-ui'
import {onMounted, ref} from 'vue'

// import axios from 'axios'

import HttpApi from '@/http/index'
import router from '@/router'

const formRef = ref<FormInst | null>(null)
    const notification = useNotification()
const model = ref<ModelType>({
        username: null,
        password: null,
        reenteredPassword: null
      })

onMounted(()=>{
    //发送网络请求
    
})
 

function onLogin() {
    //登录 
    HttpApi.post("/login",{
        username: model.value.username,
        password:model.value.password
    }).then((resp)=>{
        //跳转到首页
        router.replace("/home")
    }).catch(r=>{
        //弹出
        notification['error']({
          content: r.msg,
          duration: 1000,
          keepAliveOnHover: true
        })
    })
}

function onReg() {
    //注册 
    HttpApi.post("/reg",{
        username: model.value.username,
        password:model.value.password
    }).then(()=>{
        
    })
}

function handleValidateButtonClick() {
    // GetData()
    AxiosReq()
}
  
function GetData() {
    var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/";

    xhr.open(method, url, true);
    xhr.onreadystatechange = function () {
        console.log(xhr.readyState)
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        console.log(xhr.responseText);
    }
    };
    xhr.send();
}

function AxiosReq() {

    HttpApi.get("/user/1")

}
</script>

<style>
.login-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>